<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1616872" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon element-icons">&#xe780;</span>
                <div class="name">circle-close</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b6;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe77e;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe77f;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe781;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe664;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe666;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe669;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6cd;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe70d;</span>
                <div class="name">d-arrow-right</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe74a;</span>
                <div class="name">d-arrow-left</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe777;</span>
                <div class="name">document</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe778;</span>
                <div class="name">circle-check</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe779;</span>
                <div class="name">date</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe77a;</span>
                <div class="name">up</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe77b;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe77c;</span>
                <div class="name">left</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe77d;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe65e;</span>
                <div class="name">deployment-unit</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe75e;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe65f;</span>
                <div class="name">dingding</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe75f;</span>
                <div class="name">wechat</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe660;</span>
                <div class="name">desktop</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe760;</span>
                <div class="name">weibo-circle</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe661;</span>
                <div class="name">dot-chart</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe761;</span>
                <div class="name">weibo</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe662;</span>
                <div class="name">dashboard</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe762;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe663;</span>
                <div class="name">dislike</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe763;</span>
                <div class="name">vertical-right</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe764;</span>
                <div class="name">woman</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe665;</span>
                <div class="name">disconnect</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe765;</span>
                <div class="name">wifi</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe766;</span>
                <div class="name">weibo-square</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe667;</span>
                <div class="name">down-circle</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe767;</span>
                <div class="name">yahoo</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe668;</span>
                <div class="name">dribbble</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe768;</span>
                <div class="name">windows</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe769;</span>
                <div class="name">zhihu</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe66a;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe76a;</span>
                <div class="name">youtube</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe66b;</span>
                <div class="name">down-square</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe76b;</span>
                <div class="name">yuque</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe66c;</span>
                <div class="name">ellipsis</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe76c;</span>
                <div class="name">zoom-out</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe66d;</span>
                <div class="name">drag</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe76d;</span>
                <div class="name">alert</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe66e;</span>
                <div class="name">dropbox</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe76e;</span>
                <div class="name">account-book</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe66f;</span>
                <div class="name">dollar</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe76f;</span>
                <div class="name">align-right</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe670;</span>
                <div class="name">control</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe770;</span>
                <div class="name">align-center</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe671;</span>
                <div class="name">enter</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe771;</span>
                <div class="name">alibaba</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe672;</span>
                <div class="name">dribbble-square</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe772;</span>
                <div class="name">align-left</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe673;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe773;</span>
                <div class="name">alipay</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe674;</span>
                <div class="name">environment</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe774;</span>
                <div class="name">alipay-circle</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe675;</span>
                <div class="name">diff</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe775;</span>
                <div class="name">aliwangwang</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe676;</span>
                <div class="name">fall</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe776;</span>
                <div class="name">zoom-in</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe677;</span>
                <div class="name">file-add</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe678;</span>
                <div class="name">exclamation</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe679;</span>
                <div class="name">fast-forward</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe67a;</span>
                <div class="name">exception</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe67b;</span>
                <div class="name">facebook</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe67c;</span>
                <div class="name">file-ppt</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe67d;</span>
                <div class="name">fast-backward</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe67e;</span>
                <div class="name">file-image</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe67f;</span>
                <div class="name">exclamation-circle</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe680;</span>
                <div class="name">eye-invisible</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe681;</span>
                <div class="name">file-markdown</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe682;</span>
                <div class="name">file-excel</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe683;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe684;</span>
                <div class="name">folder-add</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe685;</span>
                <div class="name">file-exclamation</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe686;</span>
                <div class="name">file-text</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe687;</span>
                <div class="name">file-pdf</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe688;</span>
                <div class="name">file-protect</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe689;</span>
                <div class="name">file-done</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe68a;</span>
                <div class="name">flag</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe68b;</span>
                <div class="name">file-word</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe68c;</span>
                <div class="name">file-search</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe68d;</span>
                <div class="name">file-sync</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe68e;</span>
                <div class="name">export</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe68f;</span>
                <div class="name">file-jpg</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe690;</span>
                <div class="name">fork</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe691;</span>
                <div class="name">file-zip</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe692;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe693;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe694;</span>
                <div class="name">font-colors</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe695;</span>
                <div class="name">fire</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe696;</span>
                <div class="name">fullscreen</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe697;</span>
                <div class="name">experiment</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe698;</span>
                <div class="name">fullscreen-exit</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe699;</span>
                <div class="name">euro</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe69a;</span>
                <div class="name">file-unknown</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe69b;</span>
                <div class="name">forward</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe69c;</span>
                <div class="name">form</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe69d;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe69e;</span>
                <div class="name">gateway</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe69f;</span>
                <div class="name">folder-open</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a0;</span>
                <div class="name">fund</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a1;</span>
                <div class="name">github</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a2;</span>
                <div class="name">google</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a3;</span>
                <div class="name">frown</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a4;</span>
                <div class="name">gift</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a5;</span>
                <div class="name">font-size</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a6;</span>
                <div class="name">gold</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a7;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a8;</span>
                <div class="name">hdd</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6a9;</span>
                <div class="name">idcard</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6aa;</span>
                <div class="name">funnel-plot</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ab;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ac;</span>
                <div class="name">heart</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ad;</span>
                <div class="name">import</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ae;</span>
                <div class="name">html5</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6af;</span>
                <div class="name">global</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b0;</span>
                <div class="name">hourglass</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b1;</span>
                <div class="name">google-plus</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b2;</span>
                <div class="name">ie</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b3;</span>
                <div class="name">heat-map</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b4;</span>
                <div class="name">highlight</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b5;</span>
                <div class="name">interaction</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b7;</span>
                <div class="name">gitlab</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b8;</span>
                <div class="name">interation</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6b9;</span>
                <div class="name">info-circle</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ba;</span>
                <div class="name">inbox</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6bb;</span>
                <div class="name">line-chart</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6bc;</span>
                <div class="name">linkedin</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6bd;</span>
                <div class="name">left-circle</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6be;</span>
                <div class="name">italic</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6bf;</span>
                <div class="name">laptop</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c0;</span>
                <div class="name">line</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c1;</span>
                <div class="name">key</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c2;</span>
                <div class="name">left-square</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c3;</span>
                <div class="name">line-height</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c4;</span>
                <div class="name">insurance</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c5;</span>
                <div class="name">medium</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c6;</span>
                <div class="name">logout</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c7;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c8;</span>
                <div class="name">layout</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6c9;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ca;</span>
                <div class="name">man</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6cb;</span>
                <div class="name">medicine-box</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6cc;</span>
                <div class="name">issues-close</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ce;</span>
                <div class="name">instagram</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6cf;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d0;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d1;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d2;</span>
                <div class="name">minus-circle</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d3;</span>
                <div class="name">minus-square</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d4;</span>
                <div class="name">loading-3-quarters</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d5;</span>
                <div class="name">menu-unfold</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d6;</span>
                <div class="name">menu-fold</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d7;</span>
                <div class="name">money-collect</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d8;</span>
                <div class="name">login</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6d9;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6da;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6db;</span>
                <div class="name">ordered-list</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6dc;</span>
                <div class="name">mobile</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6dd;</span>
                <div class="name">meh</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6de;</span>
                <div class="name">monitor</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6df;</span>
                <div class="name">pause</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e0;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e1;</span>
                <div class="name">pause-circle</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e2;</span>
                <div class="name">number</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e3;</span>
                <div class="name">pay-circle</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e4;</span>
                <div class="name">medium-workmark</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e5;</span>
                <div class="name">pic-left</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e6;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e7;</span>
                <div class="name">percentage</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e8;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6e9;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ea;</span>
                <div class="name">paper-clip</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6eb;</span>
                <div class="name">play-circle</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ec;</span>
                <div class="name">pic-center</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ed;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ee;</span>
                <div class="name">play-square</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ef;</span>
                <div class="name">pie-chart</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f0;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f1;</span>
                <div class="name">pic-right</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f2;</span>
                <div class="name">plus-circle</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f3;</span>
                <div class="name">plus-square</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f4;</span>
                <div class="name">pound</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f5;</span>
                <div class="name">poweroff</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f6;</span>
                <div class="name">printer</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f7;</span>
                <div class="name">project</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f8;</span>
                <div class="name">pushpin</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6f9;</span>
                <div class="name">pull-request</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6fa;</span>
                <div class="name">qq</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6fb;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6fc;</span>
                <div class="name">profile</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6fd;</span>
                <div class="name">property-safety</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6fe;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe6ff;</span>
                <div class="name">radar-chart</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe700;</span>
                <div class="name">radius-bottomleft</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe701;</span>
                <div class="name">radius-setting</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe702;</span>
                <div class="name">qrcode</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe703;</span>
                <div class="name">read</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe704;</span>
                <div class="name">reconciliation</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe705;</span>
                <div class="name">radius-upright</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe706;</span>
                <div class="name">radius-upleft</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe707;</span>
                <div class="name">reload</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe608;</span>
                <div class="name">aliyun</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe708;</span>
                <div class="name">radius-bottomright</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe609;</span>
                <div class="name">ant-cloud</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe709;</span>
                <div class="name">reddit</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe60a;</span>
                <div class="name">appstore</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe70a;</span>
                <div class="name">red-envelope</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe60b;</span>
                <div class="name">apple</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe70b;</span>
                <div class="name">redo</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe70c;</span>
                <div class="name">retweet</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe60e;</span>
                <div class="name">apartment</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe70e;</span>
                <div class="name">right-circle</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe60f;</span>
                <div class="name">area-chart</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe70f;</span>
                <div class="name">rest</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe610;</span>
                <div class="name">ant-design</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe710;</span>
                <div class="name">rise</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe611;</span>
                <div class="name">barcode</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe711;</span>
                <div class="name">right-square</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe612;</span>
                <div class="name">bell</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe712;</span>
                <div class="name">rocket</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe613;</span>
                <div class="name">audio</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe713;</span>
                <div class="name">rollback</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe714;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe615;</span>
                <div class="name">book</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe715;</span>
                <div class="name">safety-certificate</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe616;</span>
                <div class="name">api</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe716;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe617;</span>
                <div class="name">bars</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe717;</span>
                <div class="name">schedule</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe618;</span>
                <div class="name">behance-square</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe718;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe619;</span>
                <div class="name">border-horizontal</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe719;</span>
                <div class="name">security-scan</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe61a;</span>
                <div class="name">bold</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe71a;</span>
                <div class="name">select</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe61b;</span>
                <div class="name">android</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe71b;</span>
                <div class="name">shake</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe61c;</span>
                <div class="name">backward</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe71c;</span>
                <div class="name">scissor</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe61d;</span>
                <div class="name">border-inner</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe71d;</span>
                <div class="name">shopping-cart</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe61e;</span>
                <div class="name">border-right</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe71e;</span>
                <div class="name">share-alt</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe61f;</span>
                <div class="name">audit</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe71f;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe620;</span>
                <div class="name">branches</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe720;</span>
                <div class="name">shopping</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe621;</span>
                <div class="name">amazon</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe721;</span>
                <div class="name">shop</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe622;</span>
                <div class="name">block</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe722;</span>
                <div class="name">shrink</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe623;</span>
                <div class="name">build</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe723;</span>
                <div class="name">sketch</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe624;</span>
                <div class="name">bank</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe724;</span>
                <div class="name">skin</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe625;</span>
                <div class="name">bar-chart</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe725;</span>
                <div class="name">skype</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe726;</span>
                <div class="name">robot</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe627;</span>
                <div class="name">calculator</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe727;</span>
                <div class="name">small-dash</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe728;</span>
                <div class="name">slack</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe629;</span>
                <div class="name">bg-colors</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe729;</span>
                <div class="name">safety</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe62a;</span>
                <div class="name">box-plot</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe72a;</span>
                <div class="name">slack-square</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe62b;</span>
                <div class="name">caret-down</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe72b;</span>
                <div class="name">sliders</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe62c;</span>
                <div class="name">arrows-alt</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe72c;</span>
                <div class="name">smile</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe62d;</span>
                <div class="name">behance</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe72d;</span>
                <div class="name">snippets</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe62e;</span>
                <div class="name">bulb</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe72e;</span>
                <div class="name">sort-ascending</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe62f;</span>
                <div class="name">border</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe72f;</span>
                <div class="name">solution</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe630;</span>
                <div class="name">border-outer</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe730;</span>
                <div class="name">step-backward</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe631;</span>
                <div class="name">carry-out</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe731;</span>
                <div class="name">sort-descending</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe632;</span>
                <div class="name">caret-right</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe732;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe733;</span>
                <div class="name">sound</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe634;</span>
                <div class="name">chrome</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe734;</span>
                <div class="name">step-forward</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe635;</span>
                <div class="name">border-left</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe735;</span>
                <div class="name">stock</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe636;</span>
                <div class="name">caret-up</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe736;</span>
                <div class="name">strikethrough</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe637;</span>
                <div class="name">bug</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe737;</span>
                <div class="name">stop</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe638;</span>
                <div class="name">car</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe738;</span>
                <div class="name">swap</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe739;</span>
                <div class="name">swap-left</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe63a;</span>
                <div class="name">ci</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe73a;</span>
                <div class="name">swap-right</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe63b;</span>
                <div class="name">border-top</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe73b;</span>
                <div class="name">sync</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe63c;</span>
                <div class="name">border-bottom</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe73c;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe63d;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe73d;</span>
                <div class="name">tablet</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe63e;</span>
                <div class="name">clock-circle</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe73e;</span>
                <div class="name">team</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe63f;</span>
                <div class="name">cloud-server</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe73f;</span>
                <div class="name">taobao-circle</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe640;</span>
                <div class="name">code</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe740;</span>
                <div class="name">trademark</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe641;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe741;</span>
                <div class="name">tool</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe642;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe742;</span>
                <div class="name">table</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe643;</span>
                <div class="name">border-verticle</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe743;</span>
                <div class="name">switcher</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe644;</span>
                <div class="name">cloud-download</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe744;</span>
                <div class="name">underline</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe645;</span>
                <div class="name">check-square</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe745;</span>
                <div class="name">to-top</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe646;</span>
                <div class="name">close-square</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe746;</span>
                <div class="name">trophy</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe647;</span>
                <div class="name">coffee</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe747;</span>
                <div class="name">taobao</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe648;</span>
                <div class="name">code-sandbox</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe748;</span>
                <div class="name">tags</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe649;</span>
                <div class="name">codepen-circle</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe749;</span>
                <div class="name">twitter</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe64a;</span>
                <div class="name">compass</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe64b;</span>
                <div class="name">cloud</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe74b;</span>
                <div class="name">undo</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe64c;</span>
                <div class="name">cloud-upload</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe74c;</span>
                <div class="name">thunderbolt</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe64d;</span>
                <div class="name">column-width</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe74d;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe64e;</span>
                <div class="name">colum-height</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe74e;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe64f;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe74f;</span>
                <div class="name">usb</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe650;</span>
                <div class="name">cloud-sync</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe750;</span>
                <div class="name">unordered-list</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe651;</span>
                <div class="name">codepen</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe751;</span>
                <div class="name">transaction</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe652;</span>
                <div class="name">cluster</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe752;</span>
                <div class="name">up-square</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe653;</span>
                <div class="name">customer-service</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe753;</span>
                <div class="name">up-circle</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe654;</span>
                <div class="name">container</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe754;</span>
                <div class="name">user-add</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe655;</span>
                <div class="name">column-height</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe755;</span>
                <div class="name">usergroup-add</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe656;</span>
                <div class="name">credit-card</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe756;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe657;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe757;</span>
                <div class="name">user-delete</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe658;</span>
                <div class="name">dash</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe758;</span>
                <div class="name">usergroup-delete</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe659;</span>
                <div class="name">crown</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe759;</span>
                <div class="name">vertical-align-top</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe65a;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe75a;</span>
                <div class="name">vertical-align-bottom</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe65b;</span>
                <div class="name">contacts</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe75b;</span>
                <div class="name">vertical-left</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe65c;</span>
                <div class="name">database</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe75c;</span>
                <div class="name">vertical-align-middle</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe65d;</span>
                <div class="name">copyright</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon element-icons">&#xe75d;</span>
                <div class="name">video-camera</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'element-icons';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#element-icons') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.element-icons {
  font-family: "element-icons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="element-icons"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"element-icons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon element-icons el-icon-circle-close"></span>
            <div class="name">
              circle-close
            </div>
            <div class="code-name">.el-icon-circle-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.el-icon-info
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.el-icon-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.el-icon-success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.el-icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.el-icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.el-icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.el-icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.el-icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-d-arrow-right"></span>
            <div class="name">
              d-arrow-right
            </div>
            <div class="code-name">.el-icon-d-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-d-arrow-left"></span>
            <div class="name">
              d-arrow-left
            </div>
            <div class="code-name">.el-icon-d-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-document"></span>
            <div class="name">
              document
            </div>
            <div class="code-name">.el-icon-document
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-check-circle"></span>
            <div class="name">
              circle-check
            </div>
            <div class="code-name">.el-icon-check-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-date"></span>
            <div class="name">
              date
            </div>
            <div class="code-name">.el-icon-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-up"></span>
            <div class="name">
              up
            </div>
            <div class="code-name">.el-icon-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.el-icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-left"></span>
            <div class="name">
              left
            </div>
            <div class="code-name">.el-icon-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.el-icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-deployment-unit"></span>
            <div class="name">
              deployment-unit
            </div>
            <div class="code-name">.el-icon-deployment-unit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.el-icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dingding"></span>
            <div class="name">
              dingding
            </div>
            <div class="code-name">.el-icon-dingding
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-wechat"></span>
            <div class="name">
              wechat
            </div>
            <div class="code-name">.el-icon-wechat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-desktop"></span>
            <div class="name">
              desktop
            </div>
            <div class="code-name">.el-icon-desktop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-weibo-circle"></span>
            <div class="name">
              weibo-circle
            </div>
            <div class="code-name">.el-icon-weibo-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dot-chart"></span>
            <div class="name">
              dot-chart
            </div>
            <div class="code-name">.el-icon-dot-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-weibo"></span>
            <div class="name">
              weibo
            </div>
            <div class="code-name">.el-icon-weibo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dashboard"></span>
            <div class="name">
              dashboard
            </div>
            <div class="code-name">.el-icon-dashboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.el-icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dislike"></span>
            <div class="name">
              dislike
            </div>
            <div class="code-name">.el-icon-dislike
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-vertical-right"></span>
            <div class="name">
              vertical-right
            </div>
            <div class="code-name">.el-icon-vertical-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-woman"></span>
            <div class="name">
              woman
            </div>
            <div class="code-name">.el-icon-woman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-disconnect"></span>
            <div class="name">
              disconnect
            </div>
            <div class="code-name">.el-icon-disconnect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-wifi"></span>
            <div class="name">
              wifi
            </div>
            <div class="code-name">.el-icon-wifi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-weibo-square"></span>
            <div class="name">
              weibo-square
            </div>
            <div class="code-name">.el-icon-weibo-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-down-circle"></span>
            <div class="name">
              down-circle
            </div>
            <div class="code-name">.el-icon-down-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-yahoo"></span>
            <div class="name">
              yahoo
            </div>
            <div class="code-name">.el-icon-yahoo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dribbble"></span>
            <div class="name">
              dribbble
            </div>
            <div class="code-name">.el-icon-dribbble
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-windows"></span>
            <div class="name">
              windows
            </div>
            <div class="code-name">.el-icon-windows
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-zhihu"></span>
            <div class="name">
              zhihu
            </div>
            <div class="code-name">.el-icon-zhihu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.el-icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-youtube"></span>
            <div class="name">
              youtube
            </div>
            <div class="code-name">.el-icon-youtube
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-down-square"></span>
            <div class="name">
              down-square
            </div>
            <div class="code-name">.el-icon-down-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-yuque"></span>
            <div class="name">
              yuque
            </div>
            <div class="code-name">.el-icon-yuque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-ellipsis"></span>
            <div class="name">
              ellipsis
            </div>
            <div class="code-name">.el-icon-ellipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-zoom-out"></span>
            <div class="name">
              zoom-out
            </div>
            <div class="code-name">.el-icon-zoom-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-drag"></span>
            <div class="name">
              drag
            </div>
            <div class="code-name">.el-icon-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-alert"></span>
            <div class="name">
              alert
            </div>
            <div class="code-name">.el-icon-alert
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dropbox"></span>
            <div class="name">
              dropbox
            </div>
            <div class="code-name">.el-icon-dropbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-account-book"></span>
            <div class="name">
              account-book
            </div>
            <div class="code-name">.el-icon-account-book
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dollar"></span>
            <div class="name">
              dollar
            </div>
            <div class="code-name">.el-icon-dollar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-align-right"></span>
            <div class="name">
              align-right
            </div>
            <div class="code-name">.el-icon-align-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-control"></span>
            <div class="name">
              control
            </div>
            <div class="code-name">.el-icon-control
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-align-center"></span>
            <div class="name">
              align-center
            </div>
            <div class="code-name">.el-icon-align-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-enter"></span>
            <div class="name">
              enter
            </div>
            <div class="code-name">.el-icon-enter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-alibaba"></span>
            <div class="name">
              alibaba
            </div>
            <div class="code-name">.el-icon-alibaba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dribbble-square"></span>
            <div class="name">
              dribbble-square
            </div>
            <div class="code-name">.el-icon-dribbble-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-align-left"></span>
            <div class="name">
              align-left
            </div>
            <div class="code-name">.el-icon-align-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.el-icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-alipay"></span>
            <div class="name">
              alipay
            </div>
            <div class="code-name">.el-icon-alipay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-environment"></span>
            <div class="name">
              environment
            </div>
            <div class="code-name">.el-icon-environment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-alipay-circle"></span>
            <div class="name">
              alipay-circle
            </div>
            <div class="code-name">.el-icon-alipay-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-diff"></span>
            <div class="name">
              diff
            </div>
            <div class="code-name">.el-icon-diff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-aliwangwang"></span>
            <div class="name">
              aliwangwang
            </div>
            <div class="code-name">.el-icon-aliwangwang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fall"></span>
            <div class="name">
              fall
            </div>
            <div class="code-name">.el-icon-fall
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-zoom-in"></span>
            <div class="name">
              zoom-in
            </div>
            <div class="code-name">.el-icon-zoom-in
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-add"></span>
            <div class="name">
              file-add
            </div>
            <div class="code-name">.el-icon-file-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-exclamation"></span>
            <div class="name">
              exclamation
            </div>
            <div class="code-name">.el-icon-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fast-forward"></span>
            <div class="name">
              fast-forward
            </div>
            <div class="code-name">.el-icon-fast-forward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-exception"></span>
            <div class="name">
              exception
            </div>
            <div class="code-name">.el-icon-exception
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-facebook"></span>
            <div class="name">
              facebook
            </div>
            <div class="code-name">.el-icon-facebook
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-ppt"></span>
            <div class="name">
              file-ppt
            </div>
            <div class="code-name">.el-icon-file-ppt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fast-backward"></span>
            <div class="name">
              fast-backward
            </div>
            <div class="code-name">.el-icon-fast-backward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-image"></span>
            <div class="name">
              file-image
            </div>
            <div class="code-name">.el-icon-file-image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-exclamation-circle"></span>
            <div class="name">
              exclamation-circle
            </div>
            <div class="code-name">.el-icon-exclamation-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-eye-invisible"></span>
            <div class="name">
              eye-invisible
            </div>
            <div class="code-name">.el-icon-eye-invisible
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-markdown"></span>
            <div class="name">
              file-markdown
            </div>
            <div class="code-name">.el-icon-file-markdown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-excel"></span>
            <div class="name">
              file-excel
            </div>
            <div class="code-name">.el-icon-file-excel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.el-icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-folder-add"></span>
            <div class="name">
              folder-add
            </div>
            <div class="code-name">.el-icon-folder-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-exclamation"></span>
            <div class="name">
              file-exclamation
            </div>
            <div class="code-name">.el-icon-file-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-text"></span>
            <div class="name">
              file-text
            </div>
            <div class="code-name">.el-icon-file-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-pdf"></span>
            <div class="name">
              file-pdf
            </div>
            <div class="code-name">.el-icon-file-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-protect"></span>
            <div class="name">
              file-protect
            </div>
            <div class="code-name">.el-icon-file-protect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-done"></span>
            <div class="name">
              file-done
            </div>
            <div class="code-name">.el-icon-file-done
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-flag"></span>
            <div class="name">
              flag
            </div>
            <div class="code-name">.el-icon-flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-word"></span>
            <div class="name">
              file-word
            </div>
            <div class="code-name">.el-icon-file-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-search"></span>
            <div class="name">
              file-search
            </div>
            <div class="code-name">.el-icon-file-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-sync"></span>
            <div class="name">
              file-sync
            </div>
            <div class="code-name">.el-icon-file-sync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-export"></span>
            <div class="name">
              export
            </div>
            <div class="code-name">.el-icon-export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-jpg"></span>
            <div class="name">
              file-jpg
            </div>
            <div class="code-name">.el-icon-file-jpg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fork"></span>
            <div class="name">
              fork
            </div>
            <div class="code-name">.el-icon-fork
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-zip"></span>
            <div class="name">
              file-zip
            </div>
            <div class="code-name">.el-icon-file-zip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.el-icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-eye"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.el-icon-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-font-colors"></span>
            <div class="name">
              font-colors
            </div>
            <div class="code-name">.el-icon-font-colors
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fire"></span>
            <div class="name">
              fire
            </div>
            <div class="code-name">.el-icon-fire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fullscreen"></span>
            <div class="name">
              fullscreen
            </div>
            <div class="code-name">.el-icon-fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-experiment"></span>
            <div class="name">
              experiment
            </div>
            <div class="code-name">.el-icon-experiment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fullscreen-exit"></span>
            <div class="name">
              fullscreen-exit
            </div>
            <div class="code-name">.el-icon-fullscreen-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-euro"></span>
            <div class="name">
              euro
            </div>
            <div class="code-name">.el-icon-euro
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-file-unknown"></span>
            <div class="name">
              file-unknown
            </div>
            <div class="code-name">.el-icon-file-unknown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-forward"></span>
            <div class="name">
              forward
            </div>
            <div class="code-name">.el-icon-forward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-form"></span>
            <div class="name">
              form
            </div>
            <div class="code-name">.el-icon-form
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.el-icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-gateway"></span>
            <div class="name">
              gateway
            </div>
            <div class="code-name">.el-icon-gateway
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-folder-open"></span>
            <div class="name">
              folder-open
            </div>
            <div class="code-name">.el-icon-folder-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-fund"></span>
            <div class="name">
              fund
            </div>
            <div class="code-name">.el-icon-fund
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-github"></span>
            <div class="name">
              github
            </div>
            <div class="code-name">.el-icon-github
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-google"></span>
            <div class="name">
              google
            </div>
            <div class="code-name">.el-icon-google
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-frown"></span>
            <div class="name">
              frown
            </div>
            <div class="code-name">.el-icon-frown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-gift"></span>
            <div class="name">
              gift
            </div>
            <div class="code-name">.el-icon-gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-font-size"></span>
            <div class="name">
              font-size
            </div>
            <div class="code-name">.el-icon-font-size
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-gold"></span>
            <div class="name">
              gold
            </div>
            <div class="code-name">.el-icon-gold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.el-icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-hdd"></span>
            <div class="name">
              hdd
            </div>
            <div class="code-name">.el-icon-hdd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-idcard"></span>
            <div class="name">
              idcard
            </div>
            <div class="code-name">.el-icon-idcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-funnel-plot"></span>
            <div class="name">
              funnel-plot
            </div>
            <div class="code-name">.el-icon-funnel-plot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.el-icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-heart"></span>
            <div class="name">
              heart
            </div>
            <div class="code-name">.el-icon-heart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-import"></span>
            <div class="name">
              import
            </div>
            <div class="code-name">.el-icon-import
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-html5"></span>
            <div class="name">
              html5
            </div>
            <div class="code-name">.el-icon-html5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-global"></span>
            <div class="name">
              global
            </div>
            <div class="code-name">.el-icon-global
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-hourglass"></span>
            <div class="name">
              hourglass
            </div>
            <div class="code-name">.el-icon-hourglass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-google-plus"></span>
            <div class="name">
              google-plus
            </div>
            <div class="code-name">.el-icon-google-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-ie"></span>
            <div class="name">
              ie
            </div>
            <div class="code-name">.el-icon-ie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-heat-map"></span>
            <div class="name">
              heat-map
            </div>
            <div class="code-name">.el-icon-heat-map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-highlight"></span>
            <div class="name">
              highlight
            </div>
            <div class="code-name">.el-icon-highlight
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-interaction"></span>
            <div class="name">
              interaction
            </div>
            <div class="code-name">.el-icon-interaction
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-gitlab"></span>
            <div class="name">
              gitlab
            </div>
            <div class="code-name">.el-icon-gitlab
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-interation"></span>
            <div class="name">
              interation
            </div>
            <div class="code-name">.el-icon-interation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-info-circle"></span>
            <div class="name">
              info-circle
            </div>
            <div class="code-name">.el-icon-info-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-inbox"></span>
            <div class="name">
              inbox
            </div>
            <div class="code-name">.el-icon-inbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-line-chart"></span>
            <div class="name">
              line-chart
            </div>
            <div class="code-name">.el-icon-line-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-linkedin"></span>
            <div class="name">
              linkedin
            </div>
            <div class="code-name">.el-icon-linkedin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-left-circle"></span>
            <div class="name">
              left-circle
            </div>
            <div class="code-name">.el-icon-left-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-italic"></span>
            <div class="name">
              italic
            </div>
            <div class="code-name">.el-icon-italic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-laptop"></span>
            <div class="name">
              laptop
            </div>
            <div class="code-name">.el-icon-laptop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-line"></span>
            <div class="name">
              line
            </div>
            <div class="code-name">.el-icon-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-key"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.el-icon-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-left-square"></span>
            <div class="name">
              left-square
            </div>
            <div class="code-name">.el-icon-left-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-line-height"></span>
            <div class="name">
              line-height
            </div>
            <div class="code-name">.el-icon-line-height
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-insurance"></span>
            <div class="name">
              insurance
            </div>
            <div class="code-name">.el-icon-insurance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-medium"></span>
            <div class="name">
              medium
            </div>
            <div class="code-name">.el-icon-medium
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-logout"></span>
            <div class="name">
              logout
            </div>
            <div class="code-name">.el-icon-logout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.el-icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-layout"></span>
            <div class="name">
              layout
            </div>
            <div class="code-name">.el-icon-layout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.el-icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-man"></span>
            <div class="name">
              man
            </div>
            <div class="code-name">.el-icon-man
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-medicine-box"></span>
            <div class="name">
              medicine-box
            </div>
            <div class="code-name">.el-icon-medicine-box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-issues-close"></span>
            <div class="name">
              issues-close
            </div>
            <div class="code-name">.el-icon-issues-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-instagram"></span>
            <div class="name">
              instagram
            </div>
            <div class="code-name">.el-icon-instagram
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.el-icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.el-icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.el-icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-minus-circle"></span>
            <div class="name">
              minus-circle
            </div>
            <div class="code-name">.el-icon-minus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-minus-square"></span>
            <div class="name">
              minus-square
            </div>
            <div class="code-name">.el-icon-minus-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-loading-3-quarters"></span>
            <div class="name">
              loading-3-quarters
            </div>
            <div class="code-name">.el-icon-loading-3-quarters
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-menu-unfold"></span>
            <div class="name">
              menu-unfold
            </div>
            <div class="code-name">.el-icon-menu-unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-menu-fold"></span>
            <div class="name">
              menu-fold
            </div>
            <div class="code-name">.el-icon-menu-fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-money-collect"></span>
            <div class="name">
              money-collect
            </div>
            <div class="code-name">.el-icon-money-collect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-login"></span>
            <div class="name">
              login
            </div>
            <div class="code-name">.el-icon-login
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.el-icon-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.el-icon-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-ordered-list"></span>
            <div class="name">
              ordered-list
            </div>
            <div class="code-name">.el-icon-ordered-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-mobile"></span>
            <div class="name">
              mobile
            </div>
            <div class="code-name">.el-icon-mobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-meh"></span>
            <div class="name">
              meh
            </div>
            <div class="code-name">.el-icon-meh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-monitor"></span>
            <div class="name">
              monitor
            </div>
            <div class="code-name">.el-icon-monitor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pause"></span>
            <div class="name">
              pause
            </div>
            <div class="code-name">.el-icon-pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.el-icon-notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pause-circle"></span>
            <div class="name">
              pause-circle
            </div>
            <div class="code-name">.el-icon-pause-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-number"></span>
            <div class="name">
              number
            </div>
            <div class="code-name">.el-icon-number
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pay-circle"></span>
            <div class="name">
              pay-circle
            </div>
            <div class="code-name">.el-icon-pay-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-medium-workmark"></span>
            <div class="name">
              medium-workmark
            </div>
            <div class="code-name">.el-icon-medium-workmark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pic-left"></span>
            <div class="name">
              pic-left
            </div>
            <div class="code-name">.el-icon-pic-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.el-icon-message
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-percentage"></span>
            <div class="name">
              percentage
            </div>
            <div class="code-name">.el-icon-percentage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.el-icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.el-icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-paper-clip"></span>
            <div class="name">
              paper-clip
            </div>
            <div class="code-name">.el-icon-paper-clip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-play-circle"></span>
            <div class="name">
              play-circle
            </div>
            <div class="code-name">.el-icon-play-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pic-center"></span>
            <div class="name">
              pic-center
            </div>
            <div class="code-name">.el-icon-pic-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.el-icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-play-square"></span>
            <div class="name">
              play-square
            </div>
            <div class="code-name">.el-icon-play-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pie-chart"></span>
            <div class="name">
              pie-chart
            </div>
            <div class="code-name">.el-icon-pie-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.el-icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pic-right"></span>
            <div class="name">
              pic-right
            </div>
            <div class="code-name">.el-icon-pic-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-plus-circle"></span>
            <div class="name">
              plus-circle
            </div>
            <div class="code-name">.el-icon-plus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-plus-square"></span>
            <div class="name">
              plus-square
            </div>
            <div class="code-name">.el-icon-plus-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pound"></span>
            <div class="name">
              pound
            </div>
            <div class="code-name">.el-icon-pound
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-poweroff"></span>
            <div class="name">
              poweroff
            </div>
            <div class="code-name">.el-icon-poweroff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-printer"></span>
            <div class="name">
              printer
            </div>
            <div class="code-name">.el-icon-printer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-project"></span>
            <div class="name">
              project
            </div>
            <div class="code-name">.el-icon-project
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pushpin"></span>
            <div class="name">
              pushpin
            </div>
            <div class="code-name">.el-icon-pushpin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-pull-request"></span>
            <div class="name">
              pull-request
            </div>
            <div class="code-name">.el-icon-pull-request
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-qq"></span>
            <div class="name">
              qq
            </div>
            <div class="code-name">.el-icon-qq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-question-circle"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.el-icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-profile"></span>
            <div class="name">
              profile
            </div>
            <div class="code-name">.el-icon-profile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-property-safety"></span>
            <div class="name">
              property-safety
            </div>
            <div class="code-name">.el-icon-property-safety
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.el-icon-question
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-radar-chart"></span>
            <div class="name">
              radar-chart
            </div>
            <div class="code-name">.el-icon-radar-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-radius-bottomleft"></span>
            <div class="name">
              radius-bottomleft
            </div>
            <div class="code-name">.el-icon-radius-bottomleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-radius-setting"></span>
            <div class="name">
              radius-setting
            </div>
            <div class="code-name">.el-icon-radius-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-qrcode"></span>
            <div class="name">
              qrcode
            </div>
            <div class="code-name">.el-icon-qrcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-read"></span>
            <div class="name">
              read
            </div>
            <div class="code-name">.el-icon-read
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-reconciliation"></span>
            <div class="name">
              reconciliation
            </div>
            <div class="code-name">.el-icon-reconciliation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-radius-upright"></span>
            <div class="name">
              radius-upright
            </div>
            <div class="code-name">.el-icon-radius-upright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-radius-upleft"></span>
            <div class="name">
              radius-upleft
            </div>
            <div class="code-name">.el-icon-radius-upleft
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-reload"></span>
            <div class="name">
              reload
            </div>
            <div class="code-name">.el-icon-reload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-aliyun"></span>
            <div class="name">
              aliyun
            </div>
            <div class="code-name">.el-icon-aliyun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-radius-bottomright"></span>
            <div class="name">
              radius-bottomright
            </div>
            <div class="code-name">.el-icon-radius-bottomright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-ant-cloud"></span>
            <div class="name">
              ant-cloud
            </div>
            <div class="code-name">.el-icon-ant-cloud
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-reddit"></span>
            <div class="name">
              reddit
            </div>
            <div class="code-name">.el-icon-reddit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-appstore"></span>
            <div class="name">
              appstore
            </div>
            <div class="code-name">.el-icon-appstore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-red-envelope"></span>
            <div class="name">
              red-envelope
            </div>
            <div class="code-name">.el-icon-red-envelope
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-apple"></span>
            <div class="name">
              apple
            </div>
            <div class="code-name">.el-icon-apple
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-redo"></span>
            <div class="name">
              redo
            </div>
            <div class="code-name">.el-icon-redo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-retweet"></span>
            <div class="name">
              retweet
            </div>
            <div class="code-name">.el-icon-retweet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-apartment"></span>
            <div class="name">
              apartment
            </div>
            <div class="code-name">.el-icon-apartment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-right-circle"></span>
            <div class="name">
              right-circle
            </div>
            <div class="code-name">.el-icon-right-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-area-chart"></span>
            <div class="name">
              area-chart
            </div>
            <div class="code-name">.el-icon-area-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-rest"></span>
            <div class="name">
              rest
            </div>
            <div class="code-name">.el-icon-rest
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-ant-design"></span>
            <div class="name">
              ant-design
            </div>
            <div class="code-name">.el-icon-ant-design
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-rise"></span>
            <div class="name">
              rise
            </div>
            <div class="code-name">.el-icon-rise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-barcode"></span>
            <div class="name">
              barcode
            </div>
            <div class="code-name">.el-icon-barcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-right-square"></span>
            <div class="name">
              right-square
            </div>
            <div class="code-name">.el-icon-right-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bell"></span>
            <div class="name">
              bell
            </div>
            <div class="code-name">.el-icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-rocket"></span>
            <div class="name">
              rocket
            </div>
            <div class="code-name">.el-icon-rocket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-audio"></span>
            <div class="name">
              audio
            </div>
            <div class="code-name">.el-icon-audio
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-rollback"></span>
            <div class="name">
              rollback
            </div>
            <div class="code-name">.el-icon-rollback
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.el-icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-book"></span>
            <div class="name">
              book
            </div>
            <div class="code-name">.el-icon-book
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-safety-certificate"></span>
            <div class="name">
              safety-certificate
            </div>
            <div class="code-name">.el-icon-safety-certificate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-api"></span>
            <div class="name">
              api
            </div>
            <div class="code-name">.el-icon-api
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.el-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bars"></span>
            <div class="name">
              bars
            </div>
            <div class="code-name">.el-icon-bars
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-schedule"></span>
            <div class="name">
              schedule
            </div>
            <div class="code-name">.el-icon-schedule
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-behance-square"></span>
            <div class="name">
              behance-square
            </div>
            <div class="code-name">.el-icon-behance-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.el-icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-horizontal"></span>
            <div class="name">
              border-horizontal
            </div>
            <div class="code-name">.el-icon-border-horizontal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-security-scan"></span>
            <div class="name">
              security-scan
            </div>
            <div class="code-name">.el-icon-security-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bold"></span>
            <div class="name">
              bold
            </div>
            <div class="code-name">.el-icon-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-select"></span>
            <div class="name">
              select
            </div>
            <div class="code-name">.el-icon-select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-android"></span>
            <div class="name">
              android
            </div>
            <div class="code-name">.el-icon-android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-shake"></span>
            <div class="name">
              shake
            </div>
            <div class="code-name">.el-icon-shake
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-backward"></span>
            <div class="name">
              backward
            </div>
            <div class="code-name">.el-icon-backward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-scissor"></span>
            <div class="name">
              scissor
            </div>
            <div class="code-name">.el-icon-scissor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-inner"></span>
            <div class="name">
              border-inner
            </div>
            <div class="code-name">.el-icon-border-inner
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-shopping-cart"></span>
            <div class="name">
              shopping-cart
            </div>
            <div class="code-name">.el-icon-shopping-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-right"></span>
            <div class="name">
              border-right
            </div>
            <div class="code-name">.el-icon-border-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-share-alt"></span>
            <div class="name">
              share-alt
            </div>
            <div class="code-name">.el-icon-share-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-audit"></span>
            <div class="name">
              audit
            </div>
            <div class="code-name">.el-icon-audit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.el-icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-branches"></span>
            <div class="name">
              branches
            </div>
            <div class="code-name">.el-icon-branches
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-shopping"></span>
            <div class="name">
              shopping
            </div>
            <div class="code-name">.el-icon-shopping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-amazon"></span>
            <div class="name">
              amazon
            </div>
            <div class="code-name">.el-icon-amazon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-shop"></span>
            <div class="name">
              shop
            </div>
            <div class="code-name">.el-icon-shop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-block"></span>
            <div class="name">
              block
            </div>
            <div class="code-name">.el-icon-block
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-shrink"></span>
            <div class="name">
              shrink
            </div>
            <div class="code-name">.el-icon-shrink
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-build"></span>
            <div class="name">
              build
            </div>
            <div class="code-name">.el-icon-build
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-sketch"></span>
            <div class="name">
              sketch
            </div>
            <div class="code-name">.el-icon-sketch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bank"></span>
            <div class="name">
              bank
            </div>
            <div class="code-name">.el-icon-bank
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-skin"></span>
            <div class="name">
              skin
            </div>
            <div class="code-name">.el-icon-skin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bar-chart"></span>
            <div class="name">
              bar-chart
            </div>
            <div class="code-name">.el-icon-bar-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-skype"></span>
            <div class="name">
              skype
            </div>
            <div class="code-name">.el-icon-skype
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-robot"></span>
            <div class="name">
              robot
            </div>
            <div class="code-name">.el-icon-robot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-calculator"></span>
            <div class="name">
              calculator
            </div>
            <div class="code-name">.el-icon-calculator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-small-dash"></span>
            <div class="name">
              small-dash
            </div>
            <div class="code-name">.el-icon-small-dash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-slack"></span>
            <div class="name">
              slack
            </div>
            <div class="code-name">.el-icon-slack
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bg-colors"></span>
            <div class="name">
              bg-colors
            </div>
            <div class="code-name">.el-icon-bg-colors
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-safety"></span>
            <div class="name">
              safety
            </div>
            <div class="code-name">.el-icon-safety
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-box-plot"></span>
            <div class="name">
              box-plot
            </div>
            <div class="code-name">.el-icon-box-plot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-slack-square"></span>
            <div class="name">
              slack-square
            </div>
            <div class="code-name">.el-icon-slack-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-caret-down"></span>
            <div class="name">
              caret-down
            </div>
            <div class="code-name">.el-icon-caret-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-sliders"></span>
            <div class="name">
              sliders
            </div>
            <div class="code-name">.el-icon-sliders
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-arrows-alt"></span>
            <div class="name">
              arrows-alt
            </div>
            <div class="code-name">.el-icon-arrows-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-smile"></span>
            <div class="name">
              smile
            </div>
            <div class="code-name">.el-icon-smile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-behance"></span>
            <div class="name">
              behance
            </div>
            <div class="code-name">.el-icon-behance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-snippets"></span>
            <div class="name">
              snippets
            </div>
            <div class="code-name">.el-icon-snippets
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bulb"></span>
            <div class="name">
              bulb
            </div>
            <div class="code-name">.el-icon-bulb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-sort-ascending"></span>
            <div class="name">
              sort-ascending
            </div>
            <div class="code-name">.el-icon-sort-ascending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border"></span>
            <div class="name">
              border
            </div>
            <div class="code-name">.el-icon-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-solution"></span>
            <div class="name">
              solution
            </div>
            <div class="code-name">.el-icon-solution
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-outer"></span>
            <div class="name">
              border-outer
            </div>
            <div class="code-name">.el-icon-border-outer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-step-backward"></span>
            <div class="name">
              step-backward
            </div>
            <div class="code-name">.el-icon-step-backward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-carry-out"></span>
            <div class="name">
              carry-out
            </div>
            <div class="code-name">.el-icon-carry-out
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-sort-descending"></span>
            <div class="name">
              sort-descending
            </div>
            <div class="code-name">.el-icon-sort-descending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-caret-right"></span>
            <div class="name">
              caret-right
            </div>
            <div class="code-name">.el-icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-star"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.el-icon-star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-sound"></span>
            <div class="name">
              sound
            </div>
            <div class="code-name">.el-icon-sound
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-chrome"></span>
            <div class="name">
              chrome
            </div>
            <div class="code-name">.el-icon-chrome
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-step-forward"></span>
            <div class="name">
              step-forward
            </div>
            <div class="code-name">.el-icon-step-forward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-left"></span>
            <div class="name">
              border-left
            </div>
            <div class="code-name">.el-icon-border-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-stock"></span>
            <div class="name">
              stock
            </div>
            <div class="code-name">.el-icon-stock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-caret-up"></span>
            <div class="name">
              caret-up
            </div>
            <div class="code-name">.el-icon-caret-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-strikethrough"></span>
            <div class="name">
              strikethrough
            </div>
            <div class="code-name">.el-icon-strikethrough
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-bug"></span>
            <div class="name">
              bug
            </div>
            <div class="code-name">.el-icon-bug
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">.el-icon-stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-car"></span>
            <div class="name">
              car
            </div>
            <div class="code-name">.el-icon-car
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-swap"></span>
            <div class="name">
              swap
            </div>
            <div class="code-name">.el-icon-swap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-swap-left"></span>
            <div class="name">
              swap-left
            </div>
            <div class="code-name">.el-icon-swap-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-ci"></span>
            <div class="name">
              ci
            </div>
            <div class="code-name">.el-icon-ci
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-swap-right"></span>
            <div class="name">
              swap-right
            </div>
            <div class="code-name">.el-icon-swap-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-top"></span>
            <div class="name">
              border-top
            </div>
            <div class="code-name">.el-icon-border-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-sync"></span>
            <div class="name">
              sync
            </div>
            <div class="code-name">.el-icon-sync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-bottom"></span>
            <div class="name">
              border-bottom
            </div>
            <div class="code-name">.el-icon-border-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.el-icon-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.el-icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-tablet"></span>
            <div class="name">
              tablet
            </div>
            <div class="code-name">.el-icon-tablet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-clock-circle"></span>
            <div class="name">
              clock-circle
            </div>
            <div class="code-name">.el-icon-clock-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-team"></span>
            <div class="name">
              team
            </div>
            <div class="code-name">.el-icon-team
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-cloud-server"></span>
            <div class="name">
              cloud-server
            </div>
            <div class="code-name">.el-icon-cloud-server
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-taobao-circle"></span>
            <div class="name">
              taobao-circle
            </div>
            <div class="code-name">.el-icon-taobao-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-code"></span>
            <div class="name">
              code
            </div>
            <div class="code-name">.el-icon-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-trademark"></span>
            <div class="name">
              trademark
            </div>
            <div class="code-name">.el-icon-trademark
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.el-icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-tool"></span>
            <div class="name">
              tool
            </div>
            <div class="code-name">.el-icon-tool
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.el-icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-table"></span>
            <div class="name">
              table
            </div>
            <div class="code-name">.el-icon-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-border-verticle"></span>
            <div class="name">
              border-verticle
            </div>
            <div class="code-name">.el-icon-border-verticle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-switcher"></span>
            <div class="name">
              switcher
            </div>
            <div class="code-name">.el-icon-switcher
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-cloud-download"></span>
            <div class="name">
              cloud-download
            </div>
            <div class="code-name">.el-icon-cloud-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-underline"></span>
            <div class="name">
              underline
            </div>
            <div class="code-name">.el-icon-underline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-check-square"></span>
            <div class="name">
              check-square
            </div>
            <div class="code-name">.el-icon-check-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-to-top"></span>
            <div class="name">
              to-top
            </div>
            <div class="code-name">.el-icon-to-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-close-square"></span>
            <div class="name">
              close-square
            </div>
            <div class="code-name">.el-icon-close-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-trophy"></span>
            <div class="name">
              trophy
            </div>
            <div class="code-name">.el-icon-trophy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-coffee"></span>
            <div class="name">
              coffee
            </div>
            <div class="code-name">.el-icon-coffee
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-taobao"></span>
            <div class="name">
              taobao
            </div>
            <div class="code-name">.el-icon-taobao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-code-sandbox"></span>
            <div class="name">
              code-sandbox
            </div>
            <div class="code-name">.el-icon-code-sandbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-tags"></span>
            <div class="name">
              tags
            </div>
            <div class="code-name">.el-icon-tags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-codepen-circle"></span>
            <div class="name">
              codepen-circle
            </div>
            <div class="code-name">.el-icon-codepen-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-twitter"></span>
            <div class="name">
              twitter
            </div>
            <div class="code-name">.el-icon-twitter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-compass"></span>
            <div class="name">
              compass
            </div>
            <div class="code-name">.el-icon-compass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-cloud"></span>
            <div class="name">
              cloud
            </div>
            <div class="code-name">.el-icon-cloud
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-undo"></span>
            <div class="name">
              undo
            </div>
            <div class="code-name">.el-icon-undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-cloud-upload"></span>
            <div class="name">
              cloud-upload
            </div>
            <div class="code-name">.el-icon-cloud-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-thunderbolt"></span>
            <div class="name">
              thunderbolt
            </div>
            <div class="code-name">.el-icon-thunderbolt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-column-width"></span>
            <div class="name">
              column-width
            </div>
            <div class="code-name">.el-icon-column-width
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.el-icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-colum-height"></span>
            <div class="name">
              colum-height
            </div>
            <div class="code-name">.el-icon-colum-height
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.el-icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.el-icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-usb"></span>
            <div class="name">
              usb
            </div>
            <div class="code-name">.el-icon-usb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-cloud-sync"></span>
            <div class="name">
              cloud-sync
            </div>
            <div class="code-name">.el-icon-cloud-sync
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-unordered-list"></span>
            <div class="name">
              unordered-list
            </div>
            <div class="code-name">.el-icon-unordered-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-codepen"></span>
            <div class="name">
              codepen
            </div>
            <div class="code-name">.el-icon-codepen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-transaction"></span>
            <div class="name">
              transaction
            </div>
            <div class="code-name">.el-icon-transaction
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-cluster"></span>
            <div class="name">
              cluster
            </div>
            <div class="code-name">.el-icon-cluster
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-up-square"></span>
            <div class="name">
              up-square
            </div>
            <div class="code-name">.el-icon-up-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-customer-service"></span>
            <div class="name">
              customer-service
            </div>
            <div class="code-name">.el-icon-customer-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-up-circle"></span>
            <div class="name">
              up-circle
            </div>
            <div class="code-name">.el-icon-up-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-container"></span>
            <div class="name">
              container
            </div>
            <div class="code-name">.el-icon-container
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-user-add"></span>
            <div class="name">
              user-add
            </div>
            <div class="code-name">.el-icon-user-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-column-height"></span>
            <div class="name">
              column-height
            </div>
            <div class="code-name">.el-icon-column-height
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-usergroup-add"></span>
            <div class="name">
              usergroup-add
            </div>
            <div class="code-name">.el-icon-usergroup-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-credit-card"></span>
            <div class="name">
              credit-card
            </div>
            <div class="code-name">.el-icon-credit-card
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.el-icon-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.el-icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-user-delete"></span>
            <div class="name">
              user-delete
            </div>
            <div class="code-name">.el-icon-user-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-dash"></span>
            <div class="name">
              dash
            </div>
            <div class="code-name">.el-icon-dash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-usergroup-delete"></span>
            <div class="name">
              usergroup-delete
            </div>
            <div class="code-name">.el-icon-usergroup-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-crown"></span>
            <div class="name">
              crown
            </div>
            <div class="code-name">.el-icon-crown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-vertical-align-top"></span>
            <div class="name">
              vertical-align-top
            </div>
            <div class="code-name">.el-icon-vertical-align-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.el-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-vertical-align-bottom"></span>
            <div class="name">
              vertical-align-bottom
            </div>
            <div class="code-name">.el-icon-vertical-align-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-contacts"></span>
            <div class="name">
              contacts
            </div>
            <div class="code-name">.el-icon-contacts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-vertical-left"></span>
            <div class="name">
              vertical-left
            </div>
            <div class="code-name">.el-icon-vertical-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-database"></span>
            <div class="name">
              database
            </div>
            <div class="code-name">.el-icon-database
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-vertical-align-middle"></span>
            <div class="name">
              vertical-align-middle
            </div>
            <div class="code-name">.el-icon-vertical-align-middle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-copyright"></span>
            <div class="name">
              copyright
            </div>
            <div class="code-name">.el-icon-copyright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon element-icons el-icon-video-camera"></span>
            <div class="name">
              video-camera
            </div>
            <div class="code-name">.el-icon-video-camera
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="element-icons el-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            element-icons" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-circle-close"></use>
                </svg>
                <div class="name">circle-close</div>
                <div class="code-name">#el-icon-circle-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#el-icon-info</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#el-icon-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#el-icon-success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#el-icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#el-icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#el-icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#el-icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#el-icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-d-arrow-right"></use>
                </svg>
                <div class="name">d-arrow-right</div>
                <div class="code-name">#el-icon-d-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-d-arrow-left"></use>
                </svg>
                <div class="name">d-arrow-left</div>
                <div class="code-name">#el-icon-d-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-document"></use>
                </svg>
                <div class="name">document</div>
                <div class="code-name">#el-icon-document</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-check-circle"></use>
                </svg>
                <div class="name">circle-check</div>
                <div class="code-name">#el-icon-check-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-date"></use>
                </svg>
                <div class="name">date</div>
                <div class="code-name">#el-icon-date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-up"></use>
                </svg>
                <div class="name">up</div>
                <div class="code-name">#el-icon-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#el-icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-left"></use>
                </svg>
                <div class="name">left</div>
                <div class="code-name">#el-icon-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#el-icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-deployment-unit"></use>
                </svg>
                <div class="name">deployment-unit</div>
                <div class="code-name">#el-icon-deployment-unit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#el-icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dingding"></use>
                </svg>
                <div class="name">dingding</div>
                <div class="code-name">#el-icon-dingding</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-wechat"></use>
                </svg>
                <div class="name">wechat</div>
                <div class="code-name">#el-icon-wechat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-desktop"></use>
                </svg>
                <div class="name">desktop</div>
                <div class="code-name">#el-icon-desktop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-weibo-circle"></use>
                </svg>
                <div class="name">weibo-circle</div>
                <div class="code-name">#el-icon-weibo-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dot-chart"></use>
                </svg>
                <div class="name">dot-chart</div>
                <div class="code-name">#el-icon-dot-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-weibo"></use>
                </svg>
                <div class="name">weibo</div>
                <div class="code-name">#el-icon-weibo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dashboard"></use>
                </svg>
                <div class="name">dashboard</div>
                <div class="code-name">#el-icon-dashboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#el-icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dislike"></use>
                </svg>
                <div class="name">dislike</div>
                <div class="code-name">#el-icon-dislike</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-vertical-right"></use>
                </svg>
                <div class="name">vertical-right</div>
                <div class="code-name">#el-icon-vertical-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-woman"></use>
                </svg>
                <div class="name">woman</div>
                <div class="code-name">#el-icon-woman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-disconnect"></use>
                </svg>
                <div class="name">disconnect</div>
                <div class="code-name">#el-icon-disconnect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-wifi"></use>
                </svg>
                <div class="name">wifi</div>
                <div class="code-name">#el-icon-wifi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-weibo-square"></use>
                </svg>
                <div class="name">weibo-square</div>
                <div class="code-name">#el-icon-weibo-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-down-circle"></use>
                </svg>
                <div class="name">down-circle</div>
                <div class="code-name">#el-icon-down-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-yahoo"></use>
                </svg>
                <div class="name">yahoo</div>
                <div class="code-name">#el-icon-yahoo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dribbble"></use>
                </svg>
                <div class="name">dribbble</div>
                <div class="code-name">#el-icon-dribbble</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-windows"></use>
                </svg>
                <div class="name">windows</div>
                <div class="code-name">#el-icon-windows</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-zhihu"></use>
                </svg>
                <div class="name">zhihu</div>
                <div class="code-name">#el-icon-zhihu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#el-icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-youtube"></use>
                </svg>
                <div class="name">youtube</div>
                <div class="code-name">#el-icon-youtube</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-down-square"></use>
                </svg>
                <div class="name">down-square</div>
                <div class="code-name">#el-icon-down-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-yuque"></use>
                </svg>
                <div class="name">yuque</div>
                <div class="code-name">#el-icon-yuque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-ellipsis"></use>
                </svg>
                <div class="name">ellipsis</div>
                <div class="code-name">#el-icon-ellipsis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-zoom-out"></use>
                </svg>
                <div class="name">zoom-out</div>
                <div class="code-name">#el-icon-zoom-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-drag"></use>
                </svg>
                <div class="name">drag</div>
                <div class="code-name">#el-icon-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-alert"></use>
                </svg>
                <div class="name">alert</div>
                <div class="code-name">#el-icon-alert</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dropbox"></use>
                </svg>
                <div class="name">dropbox</div>
                <div class="code-name">#el-icon-dropbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-account-book"></use>
                </svg>
                <div class="name">account-book</div>
                <div class="code-name">#el-icon-account-book</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dollar"></use>
                </svg>
                <div class="name">dollar</div>
                <div class="code-name">#el-icon-dollar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-align-right"></use>
                </svg>
                <div class="name">align-right</div>
                <div class="code-name">#el-icon-align-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-control"></use>
                </svg>
                <div class="name">control</div>
                <div class="code-name">#el-icon-control</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-align-center"></use>
                </svg>
                <div class="name">align-center</div>
                <div class="code-name">#el-icon-align-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-enter"></use>
                </svg>
                <div class="name">enter</div>
                <div class="code-name">#el-icon-enter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-alibaba"></use>
                </svg>
                <div class="name">alibaba</div>
                <div class="code-name">#el-icon-alibaba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dribbble-square"></use>
                </svg>
                <div class="name">dribbble-square</div>
                <div class="code-name">#el-icon-dribbble-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-align-left"></use>
                </svg>
                <div class="name">align-left</div>
                <div class="code-name">#el-icon-align-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#el-icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-alipay"></use>
                </svg>
                <div class="name">alipay</div>
                <div class="code-name">#el-icon-alipay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-environment"></use>
                </svg>
                <div class="name">environment</div>
                <div class="code-name">#el-icon-environment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-alipay-circle"></use>
                </svg>
                <div class="name">alipay-circle</div>
                <div class="code-name">#el-icon-alipay-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-diff"></use>
                </svg>
                <div class="name">diff</div>
                <div class="code-name">#el-icon-diff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-aliwangwang"></use>
                </svg>
                <div class="name">aliwangwang</div>
                <div class="code-name">#el-icon-aliwangwang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fall"></use>
                </svg>
                <div class="name">fall</div>
                <div class="code-name">#el-icon-fall</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-zoom-in"></use>
                </svg>
                <div class="name">zoom-in</div>
                <div class="code-name">#el-icon-zoom-in</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-add"></use>
                </svg>
                <div class="name">file-add</div>
                <div class="code-name">#el-icon-file-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-exclamation"></use>
                </svg>
                <div class="name">exclamation</div>
                <div class="code-name">#el-icon-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fast-forward"></use>
                </svg>
                <div class="name">fast-forward</div>
                <div class="code-name">#el-icon-fast-forward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-exception"></use>
                </svg>
                <div class="name">exception</div>
                <div class="code-name">#el-icon-exception</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-facebook"></use>
                </svg>
                <div class="name">facebook</div>
                <div class="code-name">#el-icon-facebook</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-ppt"></use>
                </svg>
                <div class="name">file-ppt</div>
                <div class="code-name">#el-icon-file-ppt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fast-backward"></use>
                </svg>
                <div class="name">fast-backward</div>
                <div class="code-name">#el-icon-fast-backward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-image"></use>
                </svg>
                <div class="name">file-image</div>
                <div class="code-name">#el-icon-file-image</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-exclamation-circle"></use>
                </svg>
                <div class="name">exclamation-circle</div>
                <div class="code-name">#el-icon-exclamation-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-eye-invisible"></use>
                </svg>
                <div class="name">eye-invisible</div>
                <div class="code-name">#el-icon-eye-invisible</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-markdown"></use>
                </svg>
                <div class="name">file-markdown</div>
                <div class="code-name">#el-icon-file-markdown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-excel"></use>
                </svg>
                <div class="name">file-excel</div>
                <div class="code-name">#el-icon-file-excel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#el-icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-folder-add"></use>
                </svg>
                <div class="name">folder-add</div>
                <div class="code-name">#el-icon-folder-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-exclamation"></use>
                </svg>
                <div class="name">file-exclamation</div>
                <div class="code-name">#el-icon-file-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-text"></use>
                </svg>
                <div class="name">file-text</div>
                <div class="code-name">#el-icon-file-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-pdf"></use>
                </svg>
                <div class="name">file-pdf</div>
                <div class="code-name">#el-icon-file-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-protect"></use>
                </svg>
                <div class="name">file-protect</div>
                <div class="code-name">#el-icon-file-protect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-done"></use>
                </svg>
                <div class="name">file-done</div>
                <div class="code-name">#el-icon-file-done</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-flag"></use>
                </svg>
                <div class="name">flag</div>
                <div class="code-name">#el-icon-flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-word"></use>
                </svg>
                <div class="name">file-word</div>
                <div class="code-name">#el-icon-file-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-search"></use>
                </svg>
                <div class="name">file-search</div>
                <div class="code-name">#el-icon-file-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-sync"></use>
                </svg>
                <div class="name">file-sync</div>
                <div class="code-name">#el-icon-file-sync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-export"></use>
                </svg>
                <div class="name">export</div>
                <div class="code-name">#el-icon-export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-jpg"></use>
                </svg>
                <div class="name">file-jpg</div>
                <div class="code-name">#el-icon-file-jpg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fork"></use>
                </svg>
                <div class="name">fork</div>
                <div class="code-name">#el-icon-fork</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-zip"></use>
                </svg>
                <div class="name">file-zip</div>
                <div class="code-name">#el-icon-file-zip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#el-icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-eye"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#el-icon-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-font-colors"></use>
                </svg>
                <div class="name">font-colors</div>
                <div class="code-name">#el-icon-font-colors</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fire"></use>
                </svg>
                <div class="name">fire</div>
                <div class="code-name">#el-icon-fire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fullscreen"></use>
                </svg>
                <div class="name">fullscreen</div>
                <div class="code-name">#el-icon-fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-experiment"></use>
                </svg>
                <div class="name">experiment</div>
                <div class="code-name">#el-icon-experiment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fullscreen-exit"></use>
                </svg>
                <div class="name">fullscreen-exit</div>
                <div class="code-name">#el-icon-fullscreen-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-euro"></use>
                </svg>
                <div class="name">euro</div>
                <div class="code-name">#el-icon-euro</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-file-unknown"></use>
                </svg>
                <div class="name">file-unknown</div>
                <div class="code-name">#el-icon-file-unknown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-forward"></use>
                </svg>
                <div class="name">forward</div>
                <div class="code-name">#el-icon-forward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-form"></use>
                </svg>
                <div class="name">form</div>
                <div class="code-name">#el-icon-form</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#el-icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-gateway"></use>
                </svg>
                <div class="name">gateway</div>
                <div class="code-name">#el-icon-gateway</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-folder-open"></use>
                </svg>
                <div class="name">folder-open</div>
                <div class="code-name">#el-icon-folder-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-fund"></use>
                </svg>
                <div class="name">fund</div>
                <div class="code-name">#el-icon-fund</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-github"></use>
                </svg>
                <div class="name">github</div>
                <div class="code-name">#el-icon-github</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-google"></use>
                </svg>
                <div class="name">google</div>
                <div class="code-name">#el-icon-google</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-frown"></use>
                </svg>
                <div class="name">frown</div>
                <div class="code-name">#el-icon-frown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-gift"></use>
                </svg>
                <div class="name">gift</div>
                <div class="code-name">#el-icon-gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-font-size"></use>
                </svg>
                <div class="name">font-size</div>
                <div class="code-name">#el-icon-font-size</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-gold"></use>
                </svg>
                <div class="name">gold</div>
                <div class="code-name">#el-icon-gold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#el-icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-hdd"></use>
                </svg>
                <div class="name">hdd</div>
                <div class="code-name">#el-icon-hdd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-idcard"></use>
                </svg>
                <div class="name">idcard</div>
                <div class="code-name">#el-icon-idcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-funnel-plot"></use>
                </svg>
                <div class="name">funnel-plot</div>
                <div class="code-name">#el-icon-funnel-plot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-history"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#el-icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-heart"></use>
                </svg>
                <div class="name">heart</div>
                <div class="code-name">#el-icon-heart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-import"></use>
                </svg>
                <div class="name">import</div>
                <div class="code-name">#el-icon-import</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-html5"></use>
                </svg>
                <div class="name">html5</div>
                <div class="code-name">#el-icon-html5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-global"></use>
                </svg>
                <div class="name">global</div>
                <div class="code-name">#el-icon-global</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-hourglass"></use>
                </svg>
                <div class="name">hourglass</div>
                <div class="code-name">#el-icon-hourglass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-google-plus"></use>
                </svg>
                <div class="name">google-plus</div>
                <div class="code-name">#el-icon-google-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-ie"></use>
                </svg>
                <div class="name">ie</div>
                <div class="code-name">#el-icon-ie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-heat-map"></use>
                </svg>
                <div class="name">heat-map</div>
                <div class="code-name">#el-icon-heat-map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-highlight"></use>
                </svg>
                <div class="name">highlight</div>
                <div class="code-name">#el-icon-highlight</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-interaction"></use>
                </svg>
                <div class="name">interaction</div>
                <div class="code-name">#el-icon-interaction</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-gitlab"></use>
                </svg>
                <div class="name">gitlab</div>
                <div class="code-name">#el-icon-gitlab</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-interation"></use>
                </svg>
                <div class="name">interation</div>
                <div class="code-name">#el-icon-interation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-info-circle"></use>
                </svg>
                <div class="name">info-circle</div>
                <div class="code-name">#el-icon-info-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-inbox"></use>
                </svg>
                <div class="name">inbox</div>
                <div class="code-name">#el-icon-inbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-line-chart"></use>
                </svg>
                <div class="name">line-chart</div>
                <div class="code-name">#el-icon-line-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-linkedin"></use>
                </svg>
                <div class="name">linkedin</div>
                <div class="code-name">#el-icon-linkedin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-left-circle"></use>
                </svg>
                <div class="name">left-circle</div>
                <div class="code-name">#el-icon-left-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-italic"></use>
                </svg>
                <div class="name">italic</div>
                <div class="code-name">#el-icon-italic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-laptop"></use>
                </svg>
                <div class="name">laptop</div>
                <div class="code-name">#el-icon-laptop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-line"></use>
                </svg>
                <div class="name">line</div>
                <div class="code-name">#el-icon-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-key"></use>
                </svg>
                <div class="name">key</div>
                <div class="code-name">#el-icon-key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-left-square"></use>
                </svg>
                <div class="name">left-square</div>
                <div class="code-name">#el-icon-left-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-line-height"></use>
                </svg>
                <div class="name">line-height</div>
                <div class="code-name">#el-icon-line-height</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-insurance"></use>
                </svg>
                <div class="name">insurance</div>
                <div class="code-name">#el-icon-insurance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-medium"></use>
                </svg>
                <div class="name">medium</div>
                <div class="code-name">#el-icon-medium</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-logout"></use>
                </svg>
                <div class="name">logout</div>
                <div class="code-name">#el-icon-logout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#el-icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-layout"></use>
                </svg>
                <div class="name">layout</div>
                <div class="code-name">#el-icon-layout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#el-icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-man"></use>
                </svg>
                <div class="name">man</div>
                <div class="code-name">#el-icon-man</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-medicine-box"></use>
                </svg>
                <div class="name">medicine-box</div>
                <div class="code-name">#el-icon-medicine-box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-issues-close"></use>
                </svg>
                <div class="name">issues-close</div>
                <div class="code-name">#el-icon-issues-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-instagram"></use>
                </svg>
                <div class="name">instagram</div>
                <div class="code-name">#el-icon-instagram</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#el-icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#el-icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#el-icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-minus-circle"></use>
                </svg>
                <div class="name">minus-circle</div>
                <div class="code-name">#el-icon-minus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-minus-square"></use>
                </svg>
                <div class="name">minus-square</div>
                <div class="code-name">#el-icon-minus-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-loading-3-quarters"></use>
                </svg>
                <div class="name">loading-3-quarters</div>
                <div class="code-name">#el-icon-loading-3-quarters</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-menu-unfold"></use>
                </svg>
                <div class="name">menu-unfold</div>
                <div class="code-name">#el-icon-menu-unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-menu-fold"></use>
                </svg>
                <div class="name">menu-fold</div>
                <div class="code-name">#el-icon-menu-fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-money-collect"></use>
                </svg>
                <div class="name">money-collect</div>
                <div class="code-name">#el-icon-money-collect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-login"></use>
                </svg>
                <div class="name">login</div>
                <div class="code-name">#el-icon-login</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#el-icon-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#el-icon-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-ordered-list"></use>
                </svg>
                <div class="name">ordered-list</div>
                <div class="code-name">#el-icon-ordered-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-mobile"></use>
                </svg>
                <div class="name">mobile</div>
                <div class="code-name">#el-icon-mobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-meh"></use>
                </svg>
                <div class="name">meh</div>
                <div class="code-name">#el-icon-meh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-monitor"></use>
                </svg>
                <div class="name">monitor</div>
                <div class="code-name">#el-icon-monitor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pause"></use>
                </svg>
                <div class="name">pause</div>
                <div class="code-name">#el-icon-pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-notification"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#el-icon-notification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pause-circle"></use>
                </svg>
                <div class="name">pause-circle</div>
                <div class="code-name">#el-icon-pause-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-number"></use>
                </svg>
                <div class="name">number</div>
                <div class="code-name">#el-icon-number</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pay-circle"></use>
                </svg>
                <div class="name">pay-circle</div>
                <div class="code-name">#el-icon-pay-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-medium-workmark"></use>
                </svg>
                <div class="name">medium-workmark</div>
                <div class="code-name">#el-icon-medium-workmark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pic-left"></use>
                </svg>
                <div class="name">pic-left</div>
                <div class="code-name">#el-icon-pic-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#el-icon-message</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-percentage"></use>
                </svg>
                <div class="name">percentage</div>
                <div class="code-name">#el-icon-percentage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#el-icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#el-icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-paper-clip"></use>
                </svg>
                <div class="name">paper-clip</div>
                <div class="code-name">#el-icon-paper-clip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-play-circle"></use>
                </svg>
                <div class="name">play-circle</div>
                <div class="code-name">#el-icon-play-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pic-center"></use>
                </svg>
                <div class="name">pic-center</div>
                <div class="code-name">#el-icon-pic-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#el-icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-play-square"></use>
                </svg>
                <div class="name">play-square</div>
                <div class="code-name">#el-icon-play-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pie-chart"></use>
                </svg>
                <div class="name">pie-chart</div>
                <div class="code-name">#el-icon-pie-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#el-icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pic-right"></use>
                </svg>
                <div class="name">pic-right</div>
                <div class="code-name">#el-icon-pic-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-plus-circle"></use>
                </svg>
                <div class="name">plus-circle</div>
                <div class="code-name">#el-icon-plus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-plus-square"></use>
                </svg>
                <div class="name">plus-square</div>
                <div class="code-name">#el-icon-plus-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pound"></use>
                </svg>
                <div class="name">pound</div>
                <div class="code-name">#el-icon-pound</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-poweroff"></use>
                </svg>
                <div class="name">poweroff</div>
                <div class="code-name">#el-icon-poweroff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-printer"></use>
                </svg>
                <div class="name">printer</div>
                <div class="code-name">#el-icon-printer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-project"></use>
                </svg>
                <div class="name">project</div>
                <div class="code-name">#el-icon-project</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pushpin"></use>
                </svg>
                <div class="name">pushpin</div>
                <div class="code-name">#el-icon-pushpin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-pull-request"></use>
                </svg>
                <div class="name">pull-request</div>
                <div class="code-name">#el-icon-pull-request</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-qq"></use>
                </svg>
                <div class="name">qq</div>
                <div class="code-name">#el-icon-qq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-question-circle"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#el-icon-question-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-profile"></use>
                </svg>
                <div class="name">profile</div>
                <div class="code-name">#el-icon-profile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-property-safety"></use>
                </svg>
                <div class="name">property-safety</div>
                <div class="code-name">#el-icon-property-safety</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#el-icon-question</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-radar-chart"></use>
                </svg>
                <div class="name">radar-chart</div>
                <div class="code-name">#el-icon-radar-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-radius-bottomleft"></use>
                </svg>
                <div class="name">radius-bottomleft</div>
                <div class="code-name">#el-icon-radius-bottomleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-radius-setting"></use>
                </svg>
                <div class="name">radius-setting</div>
                <div class="code-name">#el-icon-radius-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-qrcode"></use>
                </svg>
                <div class="name">qrcode</div>
                <div class="code-name">#el-icon-qrcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-read"></use>
                </svg>
                <div class="name">read</div>
                <div class="code-name">#el-icon-read</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-reconciliation"></use>
                </svg>
                <div class="name">reconciliation</div>
                <div class="code-name">#el-icon-reconciliation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-radius-upright"></use>
                </svg>
                <div class="name">radius-upright</div>
                <div class="code-name">#el-icon-radius-upright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-radius-upleft"></use>
                </svg>
                <div class="name">radius-upleft</div>
                <div class="code-name">#el-icon-radius-upleft</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-reload"></use>
                </svg>
                <div class="name">reload</div>
                <div class="code-name">#el-icon-reload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-aliyun"></use>
                </svg>
                <div class="name">aliyun</div>
                <div class="code-name">#el-icon-aliyun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-radius-bottomright"></use>
                </svg>
                <div class="name">radius-bottomright</div>
                <div class="code-name">#el-icon-radius-bottomright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-ant-cloud"></use>
                </svg>
                <div class="name">ant-cloud</div>
                <div class="code-name">#el-icon-ant-cloud</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-reddit"></use>
                </svg>
                <div class="name">reddit</div>
                <div class="code-name">#el-icon-reddit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-appstore"></use>
                </svg>
                <div class="name">appstore</div>
                <div class="code-name">#el-icon-appstore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-red-envelope"></use>
                </svg>
                <div class="name">red-envelope</div>
                <div class="code-name">#el-icon-red-envelope</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-apple"></use>
                </svg>
                <div class="name">apple</div>
                <div class="code-name">#el-icon-apple</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-redo"></use>
                </svg>
                <div class="name">redo</div>
                <div class="code-name">#el-icon-redo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-retweet"></use>
                </svg>
                <div class="name">retweet</div>
                <div class="code-name">#el-icon-retweet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-apartment"></use>
                </svg>
                <div class="name">apartment</div>
                <div class="code-name">#el-icon-apartment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-right-circle"></use>
                </svg>
                <div class="name">right-circle</div>
                <div class="code-name">#el-icon-right-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-area-chart"></use>
                </svg>
                <div class="name">area-chart</div>
                <div class="code-name">#el-icon-area-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-rest"></use>
                </svg>
                <div class="name">rest</div>
                <div class="code-name">#el-icon-rest</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-ant-design"></use>
                </svg>
                <div class="name">ant-design</div>
                <div class="code-name">#el-icon-ant-design</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-rise"></use>
                </svg>
                <div class="name">rise</div>
                <div class="code-name">#el-icon-rise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-barcode"></use>
                </svg>
                <div class="name">barcode</div>
                <div class="code-name">#el-icon-barcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-right-square"></use>
                </svg>
                <div class="name">right-square</div>
                <div class="code-name">#el-icon-right-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bell"></use>
                </svg>
                <div class="name">bell</div>
                <div class="code-name">#el-icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-rocket"></use>
                </svg>
                <div class="name">rocket</div>
                <div class="code-name">#el-icon-rocket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-audio"></use>
                </svg>
                <div class="name">audio</div>
                <div class="code-name">#el-icon-audio</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-rollback"></use>
                </svg>
                <div class="name">rollback</div>
                <div class="code-name">#el-icon-rollback</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#el-icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-book"></use>
                </svg>
                <div class="name">book</div>
                <div class="code-name">#el-icon-book</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-safety-certificate"></use>
                </svg>
                <div class="name">safety-certificate</div>
                <div class="code-name">#el-icon-safety-certificate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-api"></use>
                </svg>
                <div class="name">api</div>
                <div class="code-name">#el-icon-api</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#el-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bars"></use>
                </svg>
                <div class="name">bars</div>
                <div class="code-name">#el-icon-bars</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-schedule"></use>
                </svg>
                <div class="name">schedule</div>
                <div class="code-name">#el-icon-schedule</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-behance-square"></use>
                </svg>
                <div class="name">behance-square</div>
                <div class="code-name">#el-icon-behance-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#el-icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-horizontal"></use>
                </svg>
                <div class="name">border-horizontal</div>
                <div class="code-name">#el-icon-border-horizontal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-security-scan"></use>
                </svg>
                <div class="name">security-scan</div>
                <div class="code-name">#el-icon-security-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bold"></use>
                </svg>
                <div class="name">bold</div>
                <div class="code-name">#el-icon-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-select"></use>
                </svg>
                <div class="name">select</div>
                <div class="code-name">#el-icon-select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-android"></use>
                </svg>
                <div class="name">android</div>
                <div class="code-name">#el-icon-android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-shake"></use>
                </svg>
                <div class="name">shake</div>
                <div class="code-name">#el-icon-shake</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-backward"></use>
                </svg>
                <div class="name">backward</div>
                <div class="code-name">#el-icon-backward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-scissor"></use>
                </svg>
                <div class="name">scissor</div>
                <div class="code-name">#el-icon-scissor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-inner"></use>
                </svg>
                <div class="name">border-inner</div>
                <div class="code-name">#el-icon-border-inner</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-shopping-cart"></use>
                </svg>
                <div class="name">shopping-cart</div>
                <div class="code-name">#el-icon-shopping-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-right"></use>
                </svg>
                <div class="name">border-right</div>
                <div class="code-name">#el-icon-border-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-share-alt"></use>
                </svg>
                <div class="name">share-alt</div>
                <div class="code-name">#el-icon-share-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-audit"></use>
                </svg>
                <div class="name">audit</div>
                <div class="code-name">#el-icon-audit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#el-icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-branches"></use>
                </svg>
                <div class="name">branches</div>
                <div class="code-name">#el-icon-branches</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-shopping"></use>
                </svg>
                <div class="name">shopping</div>
                <div class="code-name">#el-icon-shopping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-amazon"></use>
                </svg>
                <div class="name">amazon</div>
                <div class="code-name">#el-icon-amazon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-shop"></use>
                </svg>
                <div class="name">shop</div>
                <div class="code-name">#el-icon-shop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-block"></use>
                </svg>
                <div class="name">block</div>
                <div class="code-name">#el-icon-block</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-shrink"></use>
                </svg>
                <div class="name">shrink</div>
                <div class="code-name">#el-icon-shrink</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-build"></use>
                </svg>
                <div class="name">build</div>
                <div class="code-name">#el-icon-build</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-sketch"></use>
                </svg>
                <div class="name">sketch</div>
                <div class="code-name">#el-icon-sketch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bank"></use>
                </svg>
                <div class="name">bank</div>
                <div class="code-name">#el-icon-bank</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-skin"></use>
                </svg>
                <div class="name">skin</div>
                <div class="code-name">#el-icon-skin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bar-chart"></use>
                </svg>
                <div class="name">bar-chart</div>
                <div class="code-name">#el-icon-bar-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-skype"></use>
                </svg>
                <div class="name">skype</div>
                <div class="code-name">#el-icon-skype</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-robot"></use>
                </svg>
                <div class="name">robot</div>
                <div class="code-name">#el-icon-robot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-calculator"></use>
                </svg>
                <div class="name">calculator</div>
                <div class="code-name">#el-icon-calculator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-small-dash"></use>
                </svg>
                <div class="name">small-dash</div>
                <div class="code-name">#el-icon-small-dash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-slack"></use>
                </svg>
                <div class="name">slack</div>
                <div class="code-name">#el-icon-slack</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bg-colors"></use>
                </svg>
                <div class="name">bg-colors</div>
                <div class="code-name">#el-icon-bg-colors</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-safety"></use>
                </svg>
                <div class="name">safety</div>
                <div class="code-name">#el-icon-safety</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-box-plot"></use>
                </svg>
                <div class="name">box-plot</div>
                <div class="code-name">#el-icon-box-plot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-slack-square"></use>
                </svg>
                <div class="name">slack-square</div>
                <div class="code-name">#el-icon-slack-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-caret-down"></use>
                </svg>
                <div class="name">caret-down</div>
                <div class="code-name">#el-icon-caret-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-sliders"></use>
                </svg>
                <div class="name">sliders</div>
                <div class="code-name">#el-icon-sliders</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-arrows-alt"></use>
                </svg>
                <div class="name">arrows-alt</div>
                <div class="code-name">#el-icon-arrows-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-smile"></use>
                </svg>
                <div class="name">smile</div>
                <div class="code-name">#el-icon-smile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-behance"></use>
                </svg>
                <div class="name">behance</div>
                <div class="code-name">#el-icon-behance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-snippets"></use>
                </svg>
                <div class="name">snippets</div>
                <div class="code-name">#el-icon-snippets</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bulb"></use>
                </svg>
                <div class="name">bulb</div>
                <div class="code-name">#el-icon-bulb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-sort-ascending"></use>
                </svg>
                <div class="name">sort-ascending</div>
                <div class="code-name">#el-icon-sort-ascending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border"></use>
                </svg>
                <div class="name">border</div>
                <div class="code-name">#el-icon-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-solution"></use>
                </svg>
                <div class="name">solution</div>
                <div class="code-name">#el-icon-solution</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-outer"></use>
                </svg>
                <div class="name">border-outer</div>
                <div class="code-name">#el-icon-border-outer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-step-backward"></use>
                </svg>
                <div class="name">step-backward</div>
                <div class="code-name">#el-icon-step-backward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-carry-out"></use>
                </svg>
                <div class="name">carry-out</div>
                <div class="code-name">#el-icon-carry-out</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-sort-descending"></use>
                </svg>
                <div class="name">sort-descending</div>
                <div class="code-name">#el-icon-sort-descending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-caret-right"></use>
                </svg>
                <div class="name">caret-right</div>
                <div class="code-name">#el-icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-star"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#el-icon-star</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-sound"></use>
                </svg>
                <div class="name">sound</div>
                <div class="code-name">#el-icon-sound</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-chrome"></use>
                </svg>
                <div class="name">chrome</div>
                <div class="code-name">#el-icon-chrome</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-step-forward"></use>
                </svg>
                <div class="name">step-forward</div>
                <div class="code-name">#el-icon-step-forward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-left"></use>
                </svg>
                <div class="name">border-left</div>
                <div class="code-name">#el-icon-border-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-stock"></use>
                </svg>
                <div class="name">stock</div>
                <div class="code-name">#el-icon-stock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-caret-up"></use>
                </svg>
                <div class="name">caret-up</div>
                <div class="code-name">#el-icon-caret-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-strikethrough"></use>
                </svg>
                <div class="name">strikethrough</div>
                <div class="code-name">#el-icon-strikethrough</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-bug"></use>
                </svg>
                <div class="name">bug</div>
                <div class="code-name">#el-icon-bug</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-stop"></use>
                </svg>
                <div class="name">stop</div>
                <div class="code-name">#el-icon-stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-car"></use>
                </svg>
                <div class="name">car</div>
                <div class="code-name">#el-icon-car</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-swap"></use>
                </svg>
                <div class="name">swap</div>
                <div class="code-name">#el-icon-swap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-swap-left"></use>
                </svg>
                <div class="name">swap-left</div>
                <div class="code-name">#el-icon-swap-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-ci"></use>
                </svg>
                <div class="name">ci</div>
                <div class="code-name">#el-icon-ci</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-swap-right"></use>
                </svg>
                <div class="name">swap-right</div>
                <div class="code-name">#el-icon-swap-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-top"></use>
                </svg>
                <div class="name">border-top</div>
                <div class="code-name">#el-icon-border-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-sync"></use>
                </svg>
                <div class="name">sync</div>
                <div class="code-name">#el-icon-sync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-bottom"></use>
                </svg>
                <div class="name">border-bottom</div>
                <div class="code-name">#el-icon-border-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#el-icon-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#el-icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-tablet"></use>
                </svg>
                <div class="name">tablet</div>
                <div class="code-name">#el-icon-tablet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-clock-circle"></use>
                </svg>
                <div class="name">clock-circle</div>
                <div class="code-name">#el-icon-clock-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-team"></use>
                </svg>
                <div class="name">team</div>
                <div class="code-name">#el-icon-team</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-cloud-server"></use>
                </svg>
                <div class="name">cloud-server</div>
                <div class="code-name">#el-icon-cloud-server</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-taobao-circle"></use>
                </svg>
                <div class="name">taobao-circle</div>
                <div class="code-name">#el-icon-taobao-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-code"></use>
                </svg>
                <div class="name">code</div>
                <div class="code-name">#el-icon-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-trademark"></use>
                </svg>
                <div class="name">trademark</div>
                <div class="code-name">#el-icon-trademark</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#el-icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-tool"></use>
                </svg>
                <div class="name">tool</div>
                <div class="code-name">#el-icon-tool</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#el-icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-table"></use>
                </svg>
                <div class="name">table</div>
                <div class="code-name">#el-icon-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-border-verticle"></use>
                </svg>
                <div class="name">border-verticle</div>
                <div class="code-name">#el-icon-border-verticle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-switcher"></use>
                </svg>
                <div class="name">switcher</div>
                <div class="code-name">#el-icon-switcher</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-cloud-download"></use>
                </svg>
                <div class="name">cloud-download</div>
                <div class="code-name">#el-icon-cloud-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-underline"></use>
                </svg>
                <div class="name">underline</div>
                <div class="code-name">#el-icon-underline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-check-square"></use>
                </svg>
                <div class="name">check-square</div>
                <div class="code-name">#el-icon-check-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-to-top"></use>
                </svg>
                <div class="name">to-top</div>
                <div class="code-name">#el-icon-to-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-close-square"></use>
                </svg>
                <div class="name">close-square</div>
                <div class="code-name">#el-icon-close-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-trophy"></use>
                </svg>
                <div class="name">trophy</div>
                <div class="code-name">#el-icon-trophy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-coffee"></use>
                </svg>
                <div class="name">coffee</div>
                <div class="code-name">#el-icon-coffee</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-taobao"></use>
                </svg>
                <div class="name">taobao</div>
                <div class="code-name">#el-icon-taobao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-code-sandbox"></use>
                </svg>
                <div class="name">code-sandbox</div>
                <div class="code-name">#el-icon-code-sandbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-tags"></use>
                </svg>
                <div class="name">tags</div>
                <div class="code-name">#el-icon-tags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-codepen-circle"></use>
                </svg>
                <div class="name">codepen-circle</div>
                <div class="code-name">#el-icon-codepen-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-twitter"></use>
                </svg>
                <div class="name">twitter</div>
                <div class="code-name">#el-icon-twitter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-compass"></use>
                </svg>
                <div class="name">compass</div>
                <div class="code-name">#el-icon-compass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-cloud"></use>
                </svg>
                <div class="name">cloud</div>
                <div class="code-name">#el-icon-cloud</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-undo"></use>
                </svg>
                <div class="name">undo</div>
                <div class="code-name">#el-icon-undo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-cloud-upload"></use>
                </svg>
                <div class="name">cloud-upload</div>
                <div class="code-name">#el-icon-cloud-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-thunderbolt"></use>
                </svg>
                <div class="name">thunderbolt</div>
                <div class="code-name">#el-icon-thunderbolt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-column-width"></use>
                </svg>
                <div class="name">column-width</div>
                <div class="code-name">#el-icon-column-width</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#el-icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-colum-height"></use>
                </svg>
                <div class="name">colum-height</div>
                <div class="code-name">#el-icon-colum-height</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#el-icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#el-icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-usb"></use>
                </svg>
                <div class="name">usb</div>
                <div class="code-name">#el-icon-usb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-cloud-sync"></use>
                </svg>
                <div class="name">cloud-sync</div>
                <div class="code-name">#el-icon-cloud-sync</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-unordered-list"></use>
                </svg>
                <div class="name">unordered-list</div>
                <div class="code-name">#el-icon-unordered-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-codepen"></use>
                </svg>
                <div class="name">codepen</div>
                <div class="code-name">#el-icon-codepen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-transaction"></use>
                </svg>
                <div class="name">transaction</div>
                <div class="code-name">#el-icon-transaction</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-cluster"></use>
                </svg>
                <div class="name">cluster</div>
                <div class="code-name">#el-icon-cluster</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-up-square"></use>
                </svg>
                <div class="name">up-square</div>
                <div class="code-name">#el-icon-up-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-customer-service"></use>
                </svg>
                <div class="name">customer-service</div>
                <div class="code-name">#el-icon-customer-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-up-circle"></use>
                </svg>
                <div class="name">up-circle</div>
                <div class="code-name">#el-icon-up-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-container"></use>
                </svg>
                <div class="name">container</div>
                <div class="code-name">#el-icon-container</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-user-add"></use>
                </svg>
                <div class="name">user-add</div>
                <div class="code-name">#el-icon-user-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-column-height"></use>
                </svg>
                <div class="name">column-height</div>
                <div class="code-name">#el-icon-column-height</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-usergroup-add"></use>
                </svg>
                <div class="name">usergroup-add</div>
                <div class="code-name">#el-icon-usergroup-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-credit-card"></use>
                </svg>
                <div class="name">credit-card</div>
                <div class="code-name">#el-icon-credit-card</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#el-icon-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#el-icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-user-delete"></use>
                </svg>
                <div class="name">user-delete</div>
                <div class="code-name">#el-icon-user-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-dash"></use>
                </svg>
                <div class="name">dash</div>
                <div class="code-name">#el-icon-dash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-usergroup-delete"></use>
                </svg>
                <div class="name">usergroup-delete</div>
                <div class="code-name">#el-icon-usergroup-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-crown"></use>
                </svg>
                <div class="name">crown</div>
                <div class="code-name">#el-icon-crown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-vertical-align-top"></use>
                </svg>
                <div class="name">vertical-align-top</div>
                <div class="code-name">#el-icon-vertical-align-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#el-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-vertical-align-bottom"></use>
                </svg>
                <div class="name">vertical-align-bottom</div>
                <div class="code-name">#el-icon-vertical-align-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-contacts"></use>
                </svg>
                <div class="name">contacts</div>
                <div class="code-name">#el-icon-contacts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-vertical-left"></use>
                </svg>
                <div class="name">vertical-left</div>
                <div class="code-name">#el-icon-vertical-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-database"></use>
                </svg>
                <div class="name">database</div>
                <div class="code-name">#el-icon-database</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-vertical-align-middle"></use>
                </svg>
                <div class="name">vertical-align-middle</div>
                <div class="code-name">#el-icon-vertical-align-middle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-copyright"></use>
                </svg>
                <div class="name">copyright</div>
                <div class="code-name">#el-icon-copyright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#el-icon-video-camera"></use>
                </svg>
                <div class="name">video-camera</div>
                <div class="code-name">#el-icon-video-camera</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
